<template>
  <div class="controls-container">
    <!-- 键盘控制提示 -->
    <div class="keyboard-hints">
      <h3>控制说明</h3>
      <div class="hint-grid">
        <div class="hint-item">
          <span class="key">W/↑</span>
          <span class="description">前进</span>
        </div>
        <div class="hint-item">
          <span class="key">S/↓</span>
          <span class="description">后退</span>
        </div>
        <div class="hint-item">
          <span class="key">A/←</span>
          <span class="description">左转</span>
        </div>
        <div class="hint-item">
          <span class="key">D/→</span>
          <span class="description">右转</span>
        </div>
        <div class="hint-item">
          <span class="key">鼠标</span>
          <span class="description">视角控制</span>
        </div>
        <div class="hint-item">
          <span class="key">滚轮</span>
          <span class="description">缩放</span>
        </div>
      </div>
    </div>

    <!-- 状态信息 -->
    <div class="status-panel">
      <div class="status-item">
        <span class="label">位置:</span>
        <span class="value">({{ position.x.toFixed(1) }}, {{ position.z.toFixed(1) }})</span>
      </div>
      <div class="status-item">
        <span class="label">朝向:</span>
        <span class="value">{{ rotation.toFixed(1) }}°</span>
      </div>
      <div class="status-item">
        <span class="label">速度:</span>
        <span class="value">{{ speed.toFixed(1) }} m/s</span>
      </div>
    </div>

    <!-- 快捷操作按钮 -->
    <div class="quick-actions">
      <button @click="resetPosition" class="action-btn">重置位置</button>
      <button @click="toggleFullscreen" class="action-btn">全屏</button>
      <button @click="toggleWireframe" class="action-btn">线框模式</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'

// 定义props
interface Props {
  position: { x: number; z: number }
  rotation: number
  speed: number
}

const props = defineProps<Props>()

// 定义emits
const emit = defineEmits<{
  moveForward: []
  moveBackward: []
  turnLeft: []
  turnRight: []
  resetPosition: []
  toggleFullscreen: []
  toggleWireframe: []
}>()

// 键盘状态
const keys = reactive({
  w: false,
  s: false,
  a: false,
  d: false,
  arrowUp: false,
  arrowDown: false,
  arrowLeft: false,
  arrowRight: false
})

// 键盘事件处理
const handleKeyDown = (event: KeyboardEvent) => {
  // 防止在输入框中触发
  if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
    return
  }
  
  switch (event.key.toLowerCase()) {
    case 'w':
    case 'arrowup':
      keys.w = true
      keys.arrowUp = true
      break
    case 's':
    case 'arrowdown':
      keys.s = true
      keys.arrowDown = true
      break
    case 'a':
    case 'arrowleft':
      keys.a = true
      keys.arrowLeft = true
      break
    case 'd':
    case 'arrowright':
      keys.d = true
      keys.arrowRight = true
      break
  }
}

const handleKeyUp = (event: KeyboardEvent) => {
  switch (event.key.toLowerCase()) {
    case 'w':
    case 'arrowup':
      keys.w = false
      keys.arrowUp = false
      break
    case 's':
    case 'arrowdown':
      keys.s = false
      keys.arrowDown = false
      break
    case 'a':
    case 'arrowleft':
      keys.a = false
      keys.arrowLeft = false
      break
    case 'd':
    case 'arrowright':
      keys.d = false
      keys.arrowRight = false
      break
  }
}

// 快捷操作
const resetPosition = () => {
  emit('resetPosition')
}

const toggleFullscreen = () => {
  emit('toggleFullscreen')
}

const toggleWireframe = () => {
  emit('toggleWireframe')
}

// 动画循环处理键盘输入
let animationId: number
const handleKeyboardInput = () => {
  if (keys.w || keys.arrowUp) emit('moveForward')
  if (keys.s || keys.arrowDown) emit('moveBackward')
  if (keys.a || keys.arrowLeft) emit('turnLeft')
  if (keys.d || keys.arrowRight) emit('turnRight')
  
  animationId = requestAnimationFrame(handleKeyboardInput)
}

// 生命周期
onMounted(() => {
  window.addEventListener('keydown', handleKeyDown)
  window.addEventListener('keyup', handleKeyUp)
  handleKeyboardInput()
})

onUnmounted(() => {
  window.removeEventListener('keydown', handleKeyDown)
  window.removeEventListener('keyup', handleKeyUp)
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
})
</script>

<style scoped>
.controls-container {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 20px;
  border-radius: 10px;
  z-index: 3000;
  min-width: 250px;
}

.keyboard-hints h3 {
  margin-bottom: 15px;
  font-size: 16px;
  color: #4CAF50;
}

.hint-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.hint-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.key {
  background: #333;
  color: #4CAF50;
  padding: 5px 10px;
  border-radius: 5px;
  font-family: monospace;
  font-weight: bold;
  min-width: 40px;
  text-align: center;
}

.description {
  font-size: 14px;
}

.status-panel {
  border-top: 1px solid #333;
  padding-top: 15px;
  margin-bottom: 15px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}

.label {
  color: #ccc;
}

.value {
  color: #4CAF50;
  font-weight: bold;
}

.quick-actions {
  border-top: 1px solid #333;
  padding-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.3s;
}

.action-btn:hover {
  background: #45a049;
}
</style>
